<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两侧悬浮广告</title>
</head>

<body>
    <dl>
        <dd>动画：https://blog.csdn.net/buzhao1624/article/details/107831604</dd>
        <dd>JS 控制：https://www.runoob.com/w3cnote/js-to-top.html</dd>
        <dd>核心代码：https://zhuanlan.zhihu.com/p/365169960</dd>
    </dl>
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        .jz {
            height: 3800px;
            background-color: rgb(235, 255, 192);

        }
    </style>
    <div class="jz">
        向下滑动浮现广告
        <div id="add" class='add'>
            <div class='go-top left-s'>
                <a href='#'>
                    《诗经·郑风·子衿》

                    青青子衿，悠悠我心。

                    纵我不往，子宁不嗣音？

                    青青子佩，悠悠我思。

                    纵我不往，子宁不来？

                    挑兮达兮，在城阙兮。

                    一日不见，如三月兮。
                </a>

            </div>

            <div class='go-top right-s'>
                <a href='#'>
                    《诗经·野有蔓草》

                    野有蔓草，零露漙兮。（tuán）

                    有美一人，清扬婉兮。

                    邂逅相遇，适我愿兮。

                    野有蔓草，零露瀼瀼。

                    有美一人，婉如清扬。

                    邂逅相遇，与子偕臧。zāng
                </a>
            </div>
        </div>
    </div>

    <style>
        .add {
            opacity: 0;
        }

        .left-s {
            left: 100px;
        }

        .right-s {
            right: 100px;
        }

        .go-top {
            position: fixed;
            /* 设置fixed固定定位 */
            top: 300px;
            /* 距离浏览器窗口下边框20px */
            word-break: break-all;
            /*自动换行*/

        }

        .go-top a {
            display: block;
            /* 将<a>标签设为块元素，用于美化样式 */
            text-decoration: none;
            /* 取消超链接下画线 */
            color: #333;
            /* 设置文本颜色 */
            background-color: #f2f2f2;
            /* 设置背景颜色 */
            border: 1px solid #ccc;
            /* 设置边框样式 */
            padding: 10px 20px;
            /* 设置内边距 */
            border-radius: 5px;
            /* 设置圆角矩形 */
            letter-spacing: 2px;
            /* 设置文字间距 */

            width: 180px;
            height: auto;
        }

        .isashow {
            opacity: 1;
            animation: fadeIn 1s;
        }

        .noshow {
            opacity: 0;
            animation: fadeOut 1s;
        }

        @keyframes fadeOut {
            from {
                opacity: 1
            }

            to {
                opacity: 0
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0
            }

            to {
                opacity: 1
            }
        }
    </style>
    <script>
        // window.onscroll = function () {scrollFunction()}

        //定时执行
        setTimeout(scoll, 1500);
        function scoll() {
            window.onscroll = function () { scrollFunction() }
        }
        function scrollFunction() {

            if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
                //显示
                document.getElementById('add').classList.add("isashow");
                document.getElementById('add').classList.remove("noshow");
            } else {
                //隐藏
                document.getElementById('add').classList.add("noshow");
                document.getElementById('add').classList.remove("isashow");
            }
        };



    </script>
</body>

</html>